<template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px">
      <h2 class="subtitle" style="margin-top: 20px; margin-left: 5px">灭蝇灭鼠灭蟑 工艺现场记录表</h2>
      <selector style="margin-left: 600px" v-if="(this.$store.getters.getUser.type).includes('管理')"></selector>
    </el-row>
    <el-tabs v-model="activeName">
      <el-tab-pane v-if="userType==='管理人员'" label="数据管理" name="first">
        <data-management></data-management>
      </el-tab-pane>
      <el-tab-pane label="excel导出" name="second">
        <div style="height: auto;margin: 0 10px;background-color: white" >
          <iframe id="reportFrame" scrolling="no" frameborder="0" width="100%" height="100%" :src="src"></iframe>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import { reportURL } from '@/config/baseConfig'
import dataManagement from './dataManagement'
import Selector from '../../../../components/selector'

export default {
  components: {
    Selector,
    dataManagement
  },
  name: 'index',
  data () {
    return {
      src: this.$store.getters.getReportUrl + 'craftScene%252F/craftSceneControl%252F/sjq_flyrat_process.cpt&__bypagesize__=false&factory=' + this.$store.getters.getFactory,
      activeName: 'first',
      userType: null
    }
  },
  methods: {
  },
  beforeMount () {
    const user = JSON.parse(window.localStorage.getItem('user'))
    this.userType = user.value.type
    console.log(user.value.type)
    if (user.value.type === '一线员工') {
      this.activeName = 'second'
    }
  },
  mounted () {
    const oIframe = document.getElementById('reportFrame')
    const deviceWidth = Number(document.documentElement.clientWidth)
    const deviceHeight = Number(document.documentElement.clientHeight)
    oIframe.style.width = (deviceWidth - 130) / deviceWidth * 100 + 'vw' // 数字是页面布局宽度差值
    oIframe.style.height = (deviceHeight - 200) / deviceHeight * 100 + 'vh' // 数字是页面布局高度差
  }
}
</script>

<style scoped>
  >>>.el-tabs__item {
    background-color: #e6e9f2;
  }
</style>
